<template>
    <div >
        <div class="sale-box">
            <div class="sale-left">
                <div class="sale-left-top">
                    <div class="sale-left-top-box" style="margin: 0px">
                        <el-card class="box-card">
                            <div slot="header" class="clearfix">
                                <span>销售数量</span>
                                <i class="el-icon-s-data"></i>
                            </div>
                            <div  class="text item">
                                <span>{{salesum.number}}</span>
                            </div>
                        </el-card>
                    </div>
                    <div class="sale-left-top-box">
                        <el-card class="box-card">
                            <div slot="header" class="clearfix">
                                <span>销售总额</span>
                                <i class="el-icon-goods"></i>
                            </div>
                            <div  class="text item">
                                <span>￥{{salesum.price}}</span>
                            </div>
                        </el-card>
                    </div>
                    <div class="sale-left-top-box">
                        <el-card class="box-card">
                            <div slot="header" class="clearfix">
                                <span>平均价格</span>
                                <i class="el-icon-price-tag"></i>
                            </div>
                            <div class="text item">
                                <span>￥{{Math.floor(salesum.price/salesum.number)}}</span>
                            </div>
                        </el-card>
                    </div>
                </div>
                <div>
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <span>销量统计</span>
                        </div>
                        <div id="myChart" style="height: 480px;width: 100%"></div>
                    </el-card>
                </div>
            </div>
            <div class="sale-right">
                <div class="sale-right-top" style="margin-bottom: 18px">
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <span>七天销量统计</span>
                        </div>
                        <div  style="height: 300px;width: 100%">
                            <div id="peopleChart" style="width: 100%;height:300px"></div>
                        </div>
                    </el-card>
                </div>
                <div class="sale-right-bottom">
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <span>评论统计</span>
                        </div>
                        <div  style="height: 230px;width: 100%">
                            <div id="commitChart" style="height: 230px;width: 100%"> </div>
                        </div>
                    </el-card>
                </div>

            </div>
        </div>
        <div class="sale-center">
            <div class="sale-center-box">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>销量排行</span>
                    </div>
                    <div class="text item">

                            <el-table
                                    :data="saleTop"
                                    style="width: 100%;height: 340px">
                                <el-table-column
                                        type="index">
                                </el-table-column>
                                <el-table-column
                                        prop="title"
                                        label="商品名称">
                                </el-table-column>
                                <el-table-column
                                        prop="topPrice"
                                        label="价格">
                                </el-table-column>
                                <el-table-column
                                        prop="num"
                                        label="数量">
                                </el-table-column>
                            </el-table>
                    </div>
                </el-card>
            </div>
            <div class="sale-center-box">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>消费排行</span>
                    </div>
                    <div class="text item">

                        <el-table
                                :data="shopTop"
                                style="width: 100%;height: 340px">
                            <el-table-column
                                    type="index">
                            </el-table-column>
                            <el-table-column
                                    prop="nickName"
                                    label="用户名">
                            </el-table-column>
                            <el-table-column
                                    prop="num"
                                    label="数量">
                            </el-table-column>
                            <el-table-column
                                    prop="topPrice"
                                    label="金额">
                            </el-table-column>
                        </el-table>
                    </div>
                </el-card>
            </div>
            <div class="sale-center-box">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>收藏排行</span>
                    </div>
                    <div class="text item">

                        <el-table
                                :data="colectTop"
                                style="width: 100%;height: 340px">
                            <el-table-column
                                    type="index">
                            </el-table-column>
                            <el-table-column
                                    prop="title"
                                    label="商品名称">
                            </el-table-column>
                            <el-table-column
                                    prop="price"
                                    label="价格">
                            </el-table-column>
                            <el-table-column
                                    prop="num"
                                    label="收藏人数">
                            </el-table-column>
                        </el-table>
                    </div>
                </el-card>
            </div>
        </div>
    </div>
</template>

<script>
    import desktopApi from "../../api/desktopApi";

    export default {
        name: "desktop",
        data() {
            return {
                salesum:{
                    price:0,
                    number:0
                },
                saleTop: [],
                shopTop:[],
                colectTop:[],
                days:[],
                numbers:[],
                yearData:[],
                commitData:[]
            }
        },
        methods: {
            init() {
                let cart = this.$echarts.init(document.getElementById("myChart"), 'walden')
                let option = {
                    xAxis: {
                        type: 'category',
                        data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
                        name: "月份"
                    },
                    yAxis: {
                        type: 'value',
                        name: "销量"
                    },
                    tooltip: {
                        trigger: 'axis',
                        showDelay : 0,
                    },
                    legend: {
                        data: ['今年', "去年"]
                    },
                    series: [{
                        name: '今年',
                        stack: '总量',
                        data: this.yearData[0],
                        type: 'line'
                    }, {
                        name: '去年',
                        stack: '总量',
                        data: this.yearData[1],
                        type: 'bar',
                        barWidth: "30%"
                    }]
                };
                cart.setOption(option)
                window.addEventListener("resize", cart.resize);
            },
            peopleChartinit(){
                let cart = this.$echarts.init(document.getElementById("peopleChart"), 'walden')
                let option = {
                    xAxis: {
                        type: 'category',
                        data: this.days,
                        name: "日期"
                    },
                    yAxis: {
                        type: 'value',
                        name: "销量"
                    },
                    tooltip: {
                        trigger: 'axis',
                        showDelay : 0,
                    },
                    legend: {
                        data: ['数量']
                    },
                    series: [{
                        name: '数量',
                        stack: '数量',
                        data: this.numbers,
                        type: 'line'
                    }]
                };
                cart.setOption(option)
                window.addEventListener("resize", cart.resize);
            },
            commitChartinit(){
                let cart = this.$echarts.init(document.getElementById("commitChart"), 'walden')
                let option = {
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    series : [
                        {
                            name: '评论种类',
                            type: 'pie',
                            radius: '55%',
                            data:this.commitData
                        }
                    ]
                };
                cart.setOption(option)
                window.addEventListener("resize", cart.resize);
            }
        },

        mounted() {

            desktopApi.saleSum().then(res=>{
                this.salesum=res.data
            })
            desktopApi.daysum().then(res=>{
                for (let name  in res.data) {
                    this.days.push(name)
                    this.numbers.push(res.data[name])
                    this.peopleChartinit()
                }
            })
            desktopApi.mouthSum().then(res=>{
                this.yearData=res.data
                this.init()
            })
            desktopApi.commitSum().then(res=>{
                this.commitData=[
                    {
                        name:'好评',value:res.data[0]
                    },
                    {
                        name:'差评',value:res.data[1]
                    },
                    {
                        name:'中评',value:res.data[2]
                    },
                    {
                        name:'有图',value:res.data[3]
                    }
                ]
                this.commitChartinit()

            })
            desktopApi.saleTop().then(res=>{
                this.saleTop=res.data
            })
            desktopApi.shopTop().then(res=>{
                this.shopTop=res.data
            })
            desktopApi.collectTop().then(res=>{
                this.colectTop=res.data
            })
        }
    }
</script>

<style scoped lang="scss">
    .sale-box{
        display: flex;
        justify-content: space-between;
        .sale-left{
            width: 66%;
            margin-right: 4px;
            .sale-left-top{
                display: flex;
                .sale-left-top-box{
                    width: 32%;
                    margin-left: 3%;
                    margin-bottom: 20px;
                    .box-card{
                        .clearfix{
                            position: relative;
                            i{
                                color: #3fb1e3;
                                font-size: 26px;
                                position: absolute;
                                right: 5px;
                            }
                        }
                        height: 150px;
                        .text{
                            font-size: 26px;
                        }
                    }
                }
            }
        }
        .sale-right{
            width: 32%;
        }
    }
    .sale-center{
        display: flex;
        margin-top: 16px;
        justify-content: space-between;
        .sale-center-box{
            width: 32%;
        }
    }
</style>